<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试运单综合查询详情抽屉运输计划</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      max-width: 1000px;
      margin: 0 auto;
      background-color: #f5f5f5;
    }

    .container {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }

    h1,
    h2 {
      color: #333;
      border-bottom: 2px solid #409EFF;
      padding-bottom: 10px;
    }

    .form-group {
      margin-bottom: 15px;
    }

    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      color: #555;
    }

    input,
    select {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
    }

    button {
      background: #409EFF;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      margin-right: 10px;
    }

    button:hover {
      background: #337ecc;
    }

    .result {
      margin-top: 20px;
      padding: 15px;
      border: 1px solid #e6e6e6;
      border-radius: 4px;
      background: #fafafa;
      white-space: pre-wrap;
      font-family: monospace;
      max-height: 400px;
      overflow-y: auto;
    }

    .error {
      color: #F56C6C;
      background: #FEF0F0;
      padding: 10px;
      border-radius: 4px;
      margin: 10px 0;
    }

    .success {
      color: #67C23A;
      background: #F0F9FF;
      padding: 10px;
      border-radius: 4px;
      margin: 10px 0;
    }

    .info {
      background: #e8f4fd;
      padding: 10px;
      border-radius: 4px;
      margin: 10px 0;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 15px;
    }

    th,
    td {
      padding: 8px 12px;
      text-align: left;
      border-bottom: 1px solid #eee;
    }

    th {
      background: #f8f9fa;
      font-weight: bold;
    }

    .test-section {
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>🧪 测试运单综合查询详情抽屉运输计划</h1>

    <div class="info">
      <strong>说明：</strong>
      <p>此页面用于测试运单综合查询页面详情抽屉中的运输计划列表功能。测试包括：</p>
      <ul>
        <li>运单查询功能</li>
        <li>详情抽屉打开功能</li>
        <li>运输计划列表加载功能</li>
        <li>运输计划数据显示功能</li>
      </ul>
    </div>
  </div>

  <div class="container">
    <h2>📋 测试步骤</h2>

    <div class="test-section">
      <h3>步骤1：查询运单</h3>
      <div class="form-group">
        <label for="billNo">运单编号:</label>
        <input type="text" id="billNo" placeholder="例如: YD202412250001" value="YD202412250001">
      </div>
      <button onclick="queryShipment()">查询运单</button>
      <button onclick="clearResult()">清空结果</button>
    </div>

    <div class="test-section">
      <h3>步骤2：打开详情抽屉</h3>
      <p>查询到运单后，点击下面的按钮模拟打开详情抽屉：</p>
      <button onclick="openDetailDrawer()" id="openDrawerBtn" disabled>打开详情抽屉</button>
    </div>

    <div class="test-section">
      <h3>步骤3：检查运输计划</h3>
      <p>详情抽屉打开后，检查运输计划列表是否正确显示：</p>
      <button onclick="checkTransportPlan()" id="checkPlanBtn" disabled>检查运输计划</button>
    </div>
  </div>

  <div class="container">
    <h2>📊 测试结果</h2>
    <div id="result"></div>
  </div>

  <script>
    const baseURL = 'http://localhost:8080';
    let currentShipment = null;

    function showResult (title, data) {
      const resultDiv = document.getElementById('result');
      resultDiv.innerHTML = `
                <h3>${title}</h3>
                <div class="result">${JSON.stringify(data, null, 2)}</div>
            `;
    }

    function showError (message) {
      document.getElementById('result').innerHTML = `<div class="error">❌ 错误: ${message}</div>`;
    }

    function showSuccess (message) {
      document.getElementById('result').innerHTML = `<div class="success">✅ ${message}</div>`;
    }

    function clearResult () {
      document.getElementById('result').innerHTML = '';
    }

    // 查询运单
    async function queryShipment () {
      const billNo = document.getElementById('billNo').value;
      if (!billNo) {
        showError('请输入运单编号');
        return;
      }

      try {
        showResult('查询运单', '正在查询...');

        const response = await fetch(`${baseURL}/system/bill/list?billNo=${encodeURIComponent(billNo)}`);
        const data = await response.json();

        console.log('运单查询结果:', data);

        if (data.code === 200 && data.rows && data.rows.length > 0) {
          currentShipment = data.rows[0];
          showResult('运单查询成功', {
            message: `找到运单: ${currentShipment.billNo}`,
            shipmentInfo: currentShipment
          });

          // 启用打开抽屉按钮
          document.getElementById('openDrawerBtn').disabled = false;
        } else {
          showError('未找到运单数据');
          currentShipment = null;
          document.getElementById('openDrawerBtn').disabled = true;
        }
      } catch (error) {
        console.error('查询运单异常:', error);
        showError('查询运单异常: ' + error.message);
      }
    }

    // 打开详情抽屉
    function openDetailDrawer () {
      if (!currentShipment) {
        showError('请先查询运单');
        return;
      }

      showResult('打开详情抽屉', {
        message: '模拟打开详情抽屉',
        shipmentInfo: currentShipment,
        note: '在实际页面中，这会打开详情抽屉并自动加载运输计划'
      });

      // 启用检查运输计划按钮
      document.getElementById('checkPlanBtn').disabled = false;
    }

    // 检查运输计划
    async function checkTransportPlan () {
      if (!currentShipment) {
        showError('请先查询运单');
        return;
      }

      try {
        showResult('检查运输计划', '正在查询运输计划...');

        const response = await fetch(`${baseURL}/system/plan/list?billNo=${encodeURIComponent(currentShipment.billNo)}`);
        const data = await response.json();

        console.log('运输计划查询结果:', data);

        if (data.code === 200) {
          if (data.rows && data.rows.length > 0) {
            showResult('运输计划查询成功', {
              message: `找到 ${data.rows.length} 条运输计划记录`,
              transportPlans: data.rows,
              note: '这些数据将在详情抽屉的运输计划列表中显示'
            });
          } else {
            showResult('运输计划查询结果', {
              message: '未找到运输计划记录',
              note: '详情抽屉中会显示"暂无运输计划"的空状态'
            });
          }
        } else {
          showError('查询运输计划失败: ' + (data.msg || '未知错误'));
        }
      } catch (error) {
        console.error('检查运输计划异常:', error);
        showError('检查运输计划异常: ' + error.message);
      }
    }

    // 页面加载完成后的初始化
    document.addEventListener('DOMContentLoaded', function () {
      console.log('运单综合查询详情抽屉运输计划测试页面已加载');
    });
  </script>
</body>

</html>